<template>
    <div class="head">
        <div class="box">
            <div class="box-top">
                <div class="box-left">
                    <div class="left-coi">
                        <span class="iconfont icon-zuobiao2"></span>
                    </div>
                    <div class="left-txt">
                        <p class="text-top">天朗经开中心店</p>
                        <p class="text-bottom">距您134米</p>
                    </div>
                </div>
                <div class="box-right">
                    <span class="right-zi">自提</span>
                    <span class="right-wai" @click="wai">外送</span>
                </div>
            </div>
        </div>
    </div>
</template>
<script>
export default {
    name:'Head',
    methods:{
        wai(){
            this.$router.push("/Waisong")
        }
    }
}
</script>
<style scoped>
@import url("../assets/font-footer/iconfont.css");
.box{
    width: 3.6rem;
    height: 0.74rem;
    background-color: #3c3f9e;
    position: relative;
}
.box .box-top{
    width: 100%;
    height: 0.68rem;
}
.box-top .box-left{
    width: 1.46rem;
    height: 0.36rem;
    position: absolute;
    top: 0.21rem;
    left: 0.2rem;
}
.box-left .left-coi{
    width: 0.16rem;
    height: 0.36rem;
    float: left;
}
.left-coi .icon-zuobiao2{
    font-size: 0.16rem;
    color: #fff;
}
.box-left .left-txt{
    width: 1.26rem;
    height: 0.36rem;
    float: right;
}
.left-txt .text-top{
    color: #fff;
    font-size: 0.17rem;
}
.left-txt .text-bottom{
    color: #f0f6ff;
    font-size: 0.1rem;
}
.box-top .box-right{
    width: 0.81rem;
    height: 0.25rem;
    background-color: #5e65bf;
    border-radius: 0.12rem;
    position: absolute;
    top: 0.17rem;
    right: 0.2rem;
}
.box-right .right-zi{
    display: inline-block;
    width: 0.38rem;
    height: 0.21rem;
    border-radius: 0.1rem;
    background-color: #fff;
    font-size: 0.12rem;
    position: absolute;
    top: 0.02rem;
    left: 0.02rem;
    text-align: center;
    line-height: 0.21rem;
}
.box-right .right-wai{
    display: inline-block;
    width: 0.38rem;
    height: 0.21rem;
    font-size: 0.12rem;
    position: absolute;
    top: 0.02rem;
    right: 0.02rem;
    text-align: center;
    line-height: 0.21rem;
    color: #fff;
}
</style>